import dayjs from 'dayjs'
import { useEffect, useState } from 'react'

const getDayOfWeekText = (day: number) => {
  switch (day) {
    case 0:
      return '日'
    case 1:
      return '一'
    case 2:
      return '二'
    case 3:
      return '三'
    case 4:
      return '四'
    case 5:
      return '五'
    case 6:
      return '六'
    default:
      return ''
  }
}

const RealTimeClock = () => {
  const [currentTime, setCurrentTime] = useState(dayjs())

  useEffect(() => {
    const interval = setInterval(() => {
      setCurrentTime(dayjs())
    }, 1000)

    return () => clearInterval(interval)
  }, [])

  const formattedTime = currentTime.format('HH:mm:ss')
  const dayOfWeek = currentTime.day()
  const currentDate = currentTime.format('YYYY-MM-DD')
  const dayOfWeekText = getDayOfWeekText(dayOfWeek)

  return (
    <div
      style={{
        // width: 479,
        // width: 260,
        width: 200,
        fontSize: 28,
        fontWeight: 'bold',
        paddingLeft: 32,
        height: 80,
        display: 'flex',
        alignItems: 'center',
        color: 'rgba(255,255,255,0.6)'
      }}
    >
      <div style={{ fontFamily: 'DIN-Bold', width: 100 }}>{formattedTime}</div>
      <div style={{ fontSize: 14, marginLeft: 8 }}>
        <div style={{ fontFamily: 'DIN-Bold', lineHeight: '15px' }}>
          {currentDate}
        </div>
        <div style={{ fontFamily: 'PuHuiTi-Regular' }}>星期{dayOfWeekText}</div>
      </div>
    </div>
  )
}

export default RealTimeClock
